<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="~{common/header :: commonHead}"></head>
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<link href="/css/plugins/cropper/cropper.min.css" rel="stylesheet">
<link href="/css/boxImg.css" type="text/css" rel="stylesheet">
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight"
     th:with="page=${pageObj.page},size=${pageObj.pageSize},total=${pageObj.total},totalPage=${pageObj.totalPage},keyword=${pageObj.keyword},fromDate=${pageObj.fromDate},toDate=${pageObj.toDate},ticketNum=${pageObj.ticketNum}">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>自助积分列表（获得积分、优惠券）</h5>
                    <div class="ibox-tools">
                        <shiro:hasPermission name="add_self_help_integral">
                        <a href="/self_help_integral/add" title="添加"><i class="glyphicon glyphicon-plus-sign"></i></a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="export_self_help_integral">
                        <a th:href="${#lists.isEmpty(pageObj.list)?'javascript:nodata();':'/self_help_integral/export?total='+total+'&keyword='+(keyword==null?'':keyword)+'&fromDate='+(fromDate==null?'':fromDate)+'&toDate='+(toDate==null?'':toDate)+'&ticketNum='+(ticketNum==null?'':ticketNum)}" title="导出数据"><i class="glyphicon glyphicon-export"></i></a>
                        </shiro:hasPermission>
                        <a href="javascript: window.location.href='/self_help_integral/check_success_list';" title="刷新"><i
                                class="glyphicon glyphicon-repeat"></i></a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="">
                    </div>
                    <div id="editable_wrapper" class="dataTables_wrapper form-inline" role="grid">
                        <div class="row">
                            <div class="col-sm-2">
                                <div class="dataTables_length" id="editable_length"><label>每页
                                    <select name="editable_length" aria-controls="editable" class="form-control input-sm" id="page_size_selector">
                                        <option th:selected="${size eq 5}" value="5">5</option>
                                        <option th:selected="${size eq 10}" value="10">10</option>
                                        <option th:selected="${size eq 25}" value="25">25</option>
                                        <option th:selected="${size eq 50}" value="50">50</option>
                                        <option th:selected="${size eq 100}" value="100">100</option>
                                    </select> 条记录</label>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="input-group" style="float: right">
                                    <input th:value="${ticketNum}" type="text" placeholder="请输入小票号" class="input-sm form-control" id="ticketNum">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="input-daterange input-group" id="datepicker">
                                    <input type="text" class="input-sm form-control" name="start" id="start_date" placeholder="开始时间" autocomplete="off" th:value="${fromDate} ">
                                    <span class="input-group-addon">到</span>
                                    <input type="text" class="input-sm form-control" name="end" id="end_date" placeholder="结束时间" autocomplete="off" th:value="${toDate}">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="input-group" style="float: right">
                                    <input th:value="${keyword}" type="text" placeholder="请输入关键词" class="input-sm form-control" id="search_bar">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary" id="search-btn"> 搜索</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <table class="table table-striped table-bordered table-hover  dataTable" id="editable"
                               aria-describedby="editable_info">
                            <thead>
                            <tr role="row">
                                <th aria-label="用户手机号" style="width: 10%;">用户手机号</th>
                                <th aria-label="用户名" style="width: 15%;">用户名</th>
                                <th aria-label="小票号" style="width: 10%;">小票号</th>
                                <th aria-label="金额" style="width: 10%;">金额</th>
                                <th aria-label="获得的积分" style="width: 10%;">获得的积分</th>
                                <th aria-label="商户名称" style="width: 10%;">商户名称</th>
                                <th aria-label="商户业态" style="width: 10%;">商户业态</th>
                                <th aria-label="消费日期" style="width: 15%;">消费日期</th>
                                <th aria-label="操作" style="width: 10%;">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeA odd" th:if="${#lists.isEmpty(pageObj.list)}">
                                <td colspan="9" style="text-align: center">
                                    没有数据o&gt;^&lt;o
                                </td>
                            </tr>
                            <tr class="gradeA odd" th:each="item : ${pageObj.list}">
                                <td th:with="phone=${item.phone}" th:utext="${null == keyword ? phone : #strings.replace(phone,keyword,'<span style= &quot;color: red;font-weight:bold&quot;>'+ keyword +'</span>')}"></td>
                                <td th:with="memberName=${item.memberName}" th:utext="${null == keyword ? memberName : #strings.replace(memberName,keyword,'<span style= &quot;color: red;font-weight:bold&quot;>'+ keyword +'</span>')}"></td>
                                <td th:with="ticket_num=${item.ticketNum}" th:utext="${null == ticketNum ? ticket_num : #strings.replace(ticket_num,ticketNum,'<span style= &quot;color: red;font-weight:bold&quot;>'+ ticketNum +'</span>')}"></td>
                                <td th:text="${item.money}"></td>
                                <td th:text="${item.receivePoint}"></td>
                                <td th:with="storeName=${item.storeName}" th:utext="${null == keyword ? storeName : #strings.replace(storeName,keyword,'<span style= &quot;color: red;font-weight:bold&quot;>'+ keyword +'</span>')}"></td>
                                <td th:with="storeCommercial=${item.storeCommercial}" th:utext="${null == keyword ? storeCommercial : #strings.replace(storeCommercial,keyword,'<span style= &quot;color: red;font-weight:bold&quot;>'+ keyword +'</span>')}"></td>
                                <td th:text="${item.consumeDay}"></td>
                                <td class="center ">
                                    <a type="button" class="modal-trigger" data-toggle="modal" data-target="#lookPic" th:onclick="setImage([[${item.selfHelpIntegralId}]],[[${item.memberName}]])" title="查看小票"><i class="fa fa-photo"></i></a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="dataTables_info" role="alert" aria-live="polite" aria-relevant="all"
                                     th:text="${'显示 '
                                      + (page * size + 1)
                                      + ' 到 '
                                      + ((page+1) lt totalPage ? (size + page * size) : (total % size == 0 ? total : (total % size + size * page)))
                                      + ' 项，共 '
                                      + total + ' 项 ' + totalPage + ' 页'}">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="dataTables_paginate paging_simple_numbers">
                                    <ul class="pagination" th:if="${totalPage>1}">
                                        <li th:class="${page==0}?'paginate_button previous disabled':'paginate_button previous'">
                                            <a th:href="${(page==0)?'#':'/self_help_integral/check_success_list?page='+page
                                             +'&pageSize='+size
                                             +'&keyword='+(null==keyword?'':keyword)
                                             +'&fromDate='+(null==fromDate?'':fromDate)
                                             +'&ticketNum='+(null==ticketNum?'':ticketNum)
                                             +'&toDate='+(null==toDate?'':toDate)}">上一页</a>
                                        </li>
                                        <li th:if="${totalPage<10}" th:each="i:${#numbers.sequence(1,totalPage)}"
                                            th:class="${i==page+1?'active':''}">
                                            <a th:href="${'/self_help_integral/check_success_list?page='+i
                                            +'&pageSize='+size
                                            +'&keyword='+ (null==keyword?'':keyword)
                                            +'&fromDate='+(null==fromDate?'':fromDate)
                                            +'&ticketNum='+(null==ticketNum?'':ticketNum)
                                            +'&toDate='+(null==toDate?'':toDate)}"
                                               th:text="${i}"></a>
                                        </li>
                                        <li th:if="${page<4&&totalPage>=9}" th:each="i:${#numbers.sequence(1,9)}"
                                            th:class="${i==page+1?'active':''}">
                                            <a th:href="${'/self_help_integral/check_success_list?page='+i
                                            +'&pageSize='+size
                                            +'&keyword='+ (null==keyword?'':keyword)
                                            +'&fromDate='+(null==fromDate?'':fromDate)
                                            +'&ticketNum='+(null==ticketNum?'':ticketNum)
                                            +'&toDate='+(null==toDate?'':toDate)}"
                                               th:text="${i}"></a>
                                        </li>
                                        <li th:if="${page>=4&&totalPage>=9&&page+5<totalPage}"
                                            th:each="i:${#numbers.sequence(page - 3,page + 5)}"
                                            th:class="${i==page+1?'active':''}">
                                            <a th:href="${'/self_help_integral/check_success_list?page='+i
                                            +'&pageSize='+size
                                            +'&keyword='+ (null==keyword?'':keyword)
                                            +'&fromDate='+(null==fromDate?'':fromDate)
                                            +'&ticketNum='+(null==ticketNum?'':ticketNum)
                                            +'&toDate='+(null==toDate?'':toDate)}"
                                               th:text="${i}"></a>
                                        </li>
                                        <li th:if="${page>=4&&totalPage>=9&&page+5>=totalPage}"
                                            th:each="i:${#numbers.sequence(totalPage - 8,totalPage)}"
                                            th:class="${i==page+1?'active':''}">
                                            <a th:href="${'/self_help_integral/check_success_list?page='+i
                                            +'&pageSize='+size
                                            +'&keyword='+ (null==keyword?'':keyword)
                                            +'&fromDate='+(null==fromDate?'':fromDate)
                                            +'&ticketNum='+(null==ticketNum?'':ticketNum)
                                            +'&toDate='+(null==toDate?'':toDate)}"
                                               th:text="${i}"></a>
                                        </li>
                                        <li th:class="${page+1==totalPage||totalPage<1}?'paginate_button next disabled':'paginate_button next'">
                                            <a th:href="${(page+1==totalPage||totalPage<1) ? '#' : '/self_help_integral/check_success_list?page='+(page+2)
                                             +'&pageSize='+size
                                             +'&keyword='+(null==keyword?'':keyword)
                                             +'&fromDate='+(null==fromDate?'':fromDate)
                                             +'&ticketNum='+(null==ticketNum?'':ticketNum)
                                             +'&toDate='+(null==toDate?'':toDate)}">下一页</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<div class="modal fade in" id="lookPic" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">-->
<!--    <div class="modal-dialog" >-->
<!--        <div class="modal-content">-->
<!--            <div class="modal-header">-->
<!--                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
<!--                <h4 class="modal-title" id="ticketImgModalLabel">查看小票</h4>-->
<!--            </div>-->
<!--            <div class="modal-body" id="ticketImg">-->

<!--            </div>-->
<!--            &lt;!&ndash;<div class="modal-footer" style="text-align: center" id="imgFooter">-->
<!--                <button type="button" class="btn btn-primary btn-sm" onclick="rotateimgleft()"><i class="fa fa-rotate-left"></i>左旋转</button>-->
<!--                <button type="button" class="btn btn-primary btn-sm" onclick="rotateimgright()">右旋转<i class="fa fa-rotate-right"></i></button>-->
<!--            </div>&ndash;&gt;-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
</body>
<script src="/js/plugins/cropper/cropper.min.js"></script>
<!--<script src="/js/jquery.min.js" type="text/javascript"></script>-->
<script th:inline="javascript">
    // function setImage(id,name) {
    //     $("#ticketImgModalLabel").html(name + ' 的小票')
    //     $.ajax({
    //         url: d + '/quanquan-resource/image/image_query',
    //         // url: 'http://localhost:8040/quanquan-resource/image/image_query',
    //         type: 'post',
    //         contentType:'application/json',
    //         data: JSON.stringify({foreignKeyId:id}),
    //         success: function (res) {
    //             let imageList = res.imageDTOs;
    //             if (null != imageList && imageList.length > 0) {
    //                 let image = imageList[0].imageAddress;
    //                 // $("#ticketImg").html("<img modal='zoomImg' src='" + image + "'style='width: 100%'>");
    //                 initCropper();
    //                 // $("#imgFooter").css('display','block');
    //
    //             } else {
    //                 $("#ticketImg").html("<div style='text-align: center'>未上传小票</div>");
    //                 // $("#imgFooter").css('display','none');
    //             }
    //         }
    //     });
    // }
    function setImage(id,name) {
        var image='';
        $.ajax({
            url: d + '/quanquan-resource/image/image_query',
            // url: 'http://localhost:8040/quanquan-resource/image/image_query',
            type: 'post',
            async:true,
            contentType:'application/json',
            data: JSON.stringify({foreignKeyId:id}),
            success: function (res) {
                let imageList = res.imageDTOs;
                if (null != imageList && imageList.length > 0) {
                    image = imageList[0].imageAddress;
                    initCropper();
                    console.log(image)
                    if(image != null && image != ""){
                        showImg(image);
                    }
                    else{
                        layer.msg("该记录没有小票图片",{icon: 15,time: 1000,shade : [0.5 , '#000' , true]});
                    }
                } else{
                    layer.msg("该记录没有小票图片",{icon: 15,time: 1000,shade : [0.5 , '#000' , true]});
                }
            }
        });

        function showImg(image) {
            //给body添加弹出层的html
            $("body").append("<div class=\"mask-layer\">" +
                "   <div class=\"mask-layer-black\"></div>" +
                "   <div class=\"mask-layer-container\">" +
                "       <div class=\"mask-layer-container-operate\">" +
                "           <button class=\"mask-out btn-default-styles\">放大</button>" +
                "           <button class=\"mask-in btn-default-styles\">缩小</button>" +
                "           <button class=\"mask-clockwise btn-default-styles\">顺旋转</button>" +
                "           <button class=\"mask-counterclockwise btn-default-styles\">逆旋转</button>" +
                "           <button class=\"mask-close btn-default-styles\">关闭</button>" +
                "       </div>" +
                "       <div class=\"mask-layer-imgbox auto-img-center\"></div>" +
                "   </div>" +
                "</div>"
            );
            $(".mask-layer-imgbox").append("<p><img src=\"\" alt=\"\"></p>").css('text-align','center');
            $(".mask-layer-imgbox img").prop("src", image).css('margin-top','10px'); //给弹出框的Img赋值

            //图片居中显示
            var box_width = $(".auto-img-center").width(); //图片盒子宽度
            var box_height = $(".auto-img-center").height();//图片高度高度
            var initial_width = $(".auto-img-center img").width();//初始图片宽度
            var initial_height = $(".auto-img-center img").height();//初始图片高度
            if (initial_width > initial_height) {
                $(".auto-img-center img").css("width", box_width);
                var last_imgHeight = $(".auto-img-center img").height();
                $(".auto-img-center img").css("margin-top", -(last_imgHeight - box_height) / 2);
            } else {
                $(".auto-img-center img").css("height", box_height);
                var last_imgWidth = $(".auto-img-center img").width();
                // $(".auto-img-center img").css("margin-left", -(last_imgWidth - box_width) / 2);
            }

            //图片拖拽
            var $div_img = $(".mask-layer-imgbox p");
            //绑定鼠标左键按住事件
            $div_img.bind("mousedown", function (event) {
                event.preventDefault && event.preventDefault(); //去掉图片拖动响应
                //获取需要拖动节点的坐标
                var offset_x = $(this)[0].offsetLeft;//x坐标
                var offset_y = $(this)[0].offsetTop;//y坐标
                //获取当前鼠标的坐标
                var mouse_x = event.pageX;
                var mouse_y = event.pageY;
                //绑定拖动事件
                //由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素
                $(".mask-layer-imgbox").bind("mousemove", function (ev) {
                    // 计算鼠标移动了的位置
                    var _x = ev.pageX - mouse_x;
                    var _y = ev.pageY - mouse_y;
                    //设置移动后的元素坐标
                    var now_x = (offset_x + _x ) + "px";
                    var now_y = (offset_y + _y ) + "px";
                    //改变目标元素的位置
                    $div_img.css({
                        top: now_y,
                        left: now_x
                    });
                });
            });
            //当鼠标左键松开，接触事件绑定
            $(".mask-layer-imgbox").bind("mouseup", function () {
                $(this).unbind("mousemove");
            });

            //缩放
            var zoom_n = 1;
            $(".mask-out").click(function () {
                zoom_n += 0.1;
                $(".mask-layer-imgbox img").css({
                    "transform": "scale(" + zoom_n + ")",
                    "-moz-transform": "scale(" + zoom_n + ")",
                    "-ms-transform": "scale(" + zoom_n + ")",
                    "-o-transform": "scale(" + zoom_n + ")",
                    "-webkit-": "scale(" + zoom_n + ")"
                });
            });
            $(".mask-in").click(function () {
                zoom_n -= 0.1;
                console.log(zoom_n)
                if (zoom_n <= 0.1) {
                    zoom_n = 0.1;
                    $(".mask-layer-imgbox img").css({
                        "transform":"scale(.1)",
                        "-moz-transform":"scale(.1)",
                        "-ms-transform":"scale(.1)",
                        "-o-transform":"scale(.1)",
                        "-webkit-transform":"scale(.1)"
                    });
                } else {
                    $(".mask-layer-imgbox img").css({
                        "transform": "scale(" + zoom_n + ")",
                        "-moz-transform": "scale(" + zoom_n + ")",
                        "-ms-transform": "scale(" + zoom_n + ")",
                        "-o-transform": "scale(" + zoom_n + ")",
                        "-webkit-transform": "scale(" + zoom_n + ")"
                    });
                }
            });
            //旋转
            var spin_n = 0;
            $(".mask-clockwise").click(function () {
                spin_n += 15;
                $(".mask-layer-imgbox img").parent("p").css({
                    "transform":"rotate("+ spin_n +"deg)",
                    "-moz-transform":"rotate("+ spin_n +"deg)",
                    "-ms-transform":"rotate("+ spin_n +"deg)",
                    "-o-transform":"rotate("+ spin_n +"deg)",
                    "-webkit-transform":"rotate("+ spin_n +"deg)"
                });
            });
            $(".mask-counterclockwise").click(function () {
                spin_n -= 15;
                $(".mask-layer-imgbox img").parent("p").css({
                    "transform":"rotate("+ spin_n +"deg)",
                    "-moz-transform":"rotate("+ spin_n +"deg)",
                    "-ms-transform":"rotate("+ spin_n +"deg)",
                    "-o-transform":"rotate("+ spin_n +"deg)",
                    "-webkit-transform":"rotate("+ spin_n +"deg)"
                });
            });
            //关闭
            $(".mask-close").click(function () {
                $(".mask-layer").remove();
            });
            $(".mask-layer-black").click(function () {
                $(".mask-layer").remove();
            });
        }

    }
    var current = 0;
    function initCropper() {
        $('#ticketImg > img').cropper({
            checkImageOrigin:false,
            rotatable:true,
            background:false,
            modal:false,
            guides:false,
            highlight:false,
            autoCrop:false
        });
    }
    function rotateimgright() {
        current = (current+90)%360;
        document.getElementById('ticketImage').style.transform = 'rotate('+current+'deg)';
    }
    function rotateimgleft() {
        current = (current+90)%360;
        document.getElementById('ticketImage').style.transform = 'rotate('+current+'deg)';
    }
    $("#page_size_selector").change(function () {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        let selected = $(this).val();
        window.location.href = initUrl(0, selected, '', fromDate, toDate,'');
    })
    $("#search_bar").keydown(function (e) {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        let keyword = $("#search_bar").val();
        let ticketNum = $("#ticketNum").val();
        let size = $("#page_size_selector").val();
        if (e.keyCode == 13) {
            window.location.href = initUrl(0, size, keyword, fromDate, toDate, ticketNum);
        }
    })

    $("#search-btn").click(function () {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        let size = $("#page_size_selector").val();
        let keyword = $("#search_bar").val();
        let ticketNum = $("#ticketNum").val();
        window.location.href = initUrl(0, size, keyword, fromDate, toDate,ticketNum);
    })

    function initUrl(page, size, key, fromDate, toDate, ticketNum) {
        if (null == page) {
            page = 0;
        }
        return "/self_help_integral/check_success_list?page=" + page + "&pageSize=" + size + "&keyword=" + key + "&fromDate=" + fromDate + "&toDate=" + toDate +"&ticketNum="+ ticketNum
    }
    function nodata(){
        layer.msg("暂无数据，不支持导出",{time: 500})
    }
</script>
</html>